<template>
  <div class="customerMgtList">
    <div class="header-top">
      <div class="head-title">
        客户管理
      </div>
      <el-select v-model="value" filterable size="small">
        <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div class="select-option-item">
            <span>{{ item.label }}</span>
            <i class="el-icon-circle-close icon-close"></i>
          </div>
        </el-option>
        <div class="other-option">
          <a class="link">企业管理</a>
        </div>
      </el-select>
    </div>
    <div class="content-big">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="130px">
        <el-form-item prop="userName1">
          <el-input v-model="queryParams.userName1" placeholder="客户昵称备注" clearable style="width: 240px" @keyup.enter.native="handleQuery" suffix-icon="el-icon-search"/>
        </el-form-item>
        <el-form-item prop="userName2">
          <el-input v-model="queryParams.userName2" placeholder="手机号" clearable style="width: 240px" @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item prop="userName3" class="hasTitle">
          <div class="right-big">
            <span>企微号分组:</span>
            <el-select
              v-model="queryParams.userName3"
              @change="handleQuery"
              placeholder="企微号分组"
            >
              <el-option
                v-for="item in groupingList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>

        </el-form-item>
        <el-form-item prop="userName4">
          <div class="right-big">
            <span>所属企微号:</span>
            <el-select
              v-model="queryParams.userName4"
              @change="handleQuery"
              placeholder="请选择所属企微号"
            >
              <el-option
                v-for="item in WeChatList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName5">
          <div class="right-big">
            <span>有无备注:</span>
            <el-select
              v-model="queryParams.userName5"
              @change="handleQuery"
              placeholder="请选择有无备注"
            >
              <el-option
                v-for="item in WeChatList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName6">
          <div class="right-big">
            <span>性别：</span>
            <el-select
              v-model="queryParams.userName6"
              @change="handleQuery"
              placeholder="请选择性别"
            >
              <el-option
                v-for="item in sexList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName7">
          <div class="right-big">
            <span>有无称呼：</span>
            <el-select
              v-model="queryParams.userName7"
              @change="handleQuery"
              placeholder="请选择有无称呼"
            >
              <el-option
                v-for="item in callList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName8">
          <div class="right-big">
            <span>黑名单：</span>
            <el-select
              v-model="queryParams.userName8"
              @change="handleQuery"
              placeholder="请选择"
            >
              <el-option
                v-for="item in hasList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName9">
          <div class="right-big">
            <span>白名单：</span>
            <el-select
              v-model="queryParams.userName9"
              @change="handleQuery"
              placeholder="请选择"
            >
              <el-option
                v-for="item in hasList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName10">
          <div class="right-big">
            <span>微信类型：</span>
            <el-select
              v-model="queryParams.userName10"
              @change="handleQuery"
              placeholder="请选择"
            >
              <el-option
                v-for="item in weChatTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName11">
          <div class="right-big" @click.stop="showLabel" style="position: relative; z-index:1">
            <span>企微标签：</span>
            <el-input style="position: relative; z-index: -1;" v-model="queryParams.userName11" placeholder="请选择" clearable @keyup.enter.native="handleQuery" disabled suffix-icon="el-icon-arrow-down"/>
          </div>
        </el-form-item>
        <el-form-item prop="userName12" >
          <div class="right-big" @click.stop="showLabel" style="position: relative; z-index:1">
            <span>智能标签：</span>
            <el-input style="position: relative; z-index: -1;" v-model="queryParams.userName11" placeholder="请选择" clearable @keyup.enter.native="handleQuery" disabled suffix-icon="el-icon-arrow-down"/>
          </div>
        </el-form-item>
        <el-form-item prop="userName13">
          <div class="right-big">
            <span>客户来源：</span>
            <el-select
              v-model="queryParams.userName13"
              @change="handleQuery"
              placeholder="请选择"
            >
              <el-option
                v-for="item in WeChatList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item prop="userName14">
          <div class="right-big">
            <span>好友关系：</span>
            <el-select
              v-model="queryParams.userName14"
              @change="handleQuery"
              placeholder="请选择"
            >
              <el-option
                v-for="item in WeChatList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="right-big">
            <span>流失时间：</span>
            <el-date-picker
              v-model="dateRange1"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleQuery"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="right-big">
            <span>添加时间：</span>
            <el-date-picker
              v-model="dateRange2"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleQuery"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="right-big">
            <span>客户最后发言：</span>
            <el-date-picker
              v-model="dateRange3"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleQuery"
            ></el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div class="content-tabel">
        <div class="content-head">
          <div class="content-left">
            <div class="left-title">我的客户</div>
            <div class="left-number">共有：13个客户（去重后12）</div>
          </div>
          <div class="content-right">
            <div class="example">自动记录手机号
              <el-switch
                v-model="value"
                active-color="#5993ff"
              >
              </el-switch>
              <div class="example-content" @click="getExample">示例</div>
            </div>
            <div class="group-btn">
              <el-button size="medium" @click="handleExport">导出数据</el-button>
              <el-button size="medium" @click="handleCustom">自定义表格</el-button>
            </div>
          </div>
        </div>
        <el-table
          :data="tableDataList"
          ref="customerMgtList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :label="item.label"
            align="center"
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.key"
            :min-width="item.minWidth ? item.minWidth : ``"
            :fixed="item.fixed ? item.fixed : false"
            :show-overflow-tooltip="true"
          >
            <!--用于表格自定义-->
            <template slot-scope="scope">
                <div v-if="item.key=='name'">
                  <div class="userInfo">
                    <img src="../../../assets/images/profile.jpg"/>
                    <div class="name">小城红</div>
                    <div class="label">@志新</div>
                  </div>
                </div>
              <div class="group-btn" v-else-if="item.key =='operate'">
                <el-button type="text" @click="handleView(scope.row)">详情</el-button>
                <el-button type="text">对话</el-button>
                <el-button type="text">在群</el-button>
                <el-button type="text">删除</el-button>
                <el-button type="text">黑名单</el-button>
              </div>
              <div v-else>{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div class="table-footer">
        <div class="footer-left">
          <div class="chooseAll">选择全部</div>
          已选<span>13</span>个
        </div>
        <div class="footer-right">
          <el-dropdown>
            <el-button type="primary">
              批量管理标签<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="handerTableLabel">打开企微标签</el-dropdown-item>
              <el-dropdown-item @click.native="handleNumberDelete">删企微标签</el-dropdown-item>
              <el-dropdown-item @click.native="handleSelectSmartTags">打开智能标签</el-dropdown-item>
              <el-dropdown-item @click.native="handleNumberDelete">删智能标签</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" plain>批量备注</el-button>
        </div>
      </div>
    </div>
    <!--    导出的弹窗-->
    <exportPage v-if="showExportPage" :visableIf.sync="showExportPage"></exportPage>
    <!--    自定义列表弹窗-->
    <customListPage v-if="showCustomListPage" :visableIf.sync="showCustomListPage"></customListPage>
    <!--    搜索选择标签-->
    <selectLabelPage v-if="showSelectLabelPage" :visableIf.sync="showSelectLabelPage"></selectLabelPage>
    <!--    打开企微标签-->
    <tableLabel v-if="showTableLabel" :visableIf.sync="showTableLabel"></tableLabel>
    <!-- 智能标签-->
    <selectSmartTags v-if="showSelectSmartTags" :visableIf.sync="showSelectSmartTags"></selectSmartTags>

    <example v-if="showExample" :visableIf.sync="showExample"></example>
  </div>
</template>

<script>
import {listUser, delUser,} from "@/api/system/user";

export default {
  name: "customerMgtList",
  components: {
    'exportPage': () => import('./exportPage.vue'),//导出弹窗
    'customListPage': () => import('./customListPage.vue'),//自定义列表弹窗
    'selectLabelPage': () => import('./selectLabelPage.vue'),//自定义列表弹窗
    'tableLabel': () => import('./tableLabel.vue'),//打开企微标签
    'selectSmartTags': () => import('./selectSmartTags.vue'),//打开企微标签
    'example': () => import('./example.vue'),//示例
  },
  data() {
    return {
      showExample:false,//示例
      showExportPage: false,//导出
      showCustomListPage: false,//自定义列表的弹窗
      showSelectLabelPage: false,
      showTableLabel: false,//打开企微标签
      multipleSelection: [],//表格多选
      showSelectSmartTags: false,//智能标签
      tableHeight:600,
      tableColumns: [
        {key: 'name', label: `客户`, visible: true, minWidth: 150, fixed: true},
        {key: 'mobile', label: `性别`, visible: true, minWidth: 150, fixed: false},
        {key: 'email', label: `称呼`, visible: true, minWidth: 200},
        {key: 'last_login_time', label: `所属企微号`, visible: true, minWidth: 200},
        {key: 'create_time', label: `添加时间`, visible: true, minWidth: 200},
        {key: 'check_payCreate_time', label: `企微标签`, visible: true, minWidth: 200},
        {key: 'check_payStatus_name', label: `智能标签`, visible: true, minWidth: 150},
        {key: 'account_infoStatus_name', label: `客户最后发言`, visible: true, minWidth: 150},
        {key: 'all_num', label: `客户来源`, visible: true, minWidth: 150},
        {key: 'open_num', label: `好友关系`, visible: true, minWidth: 150},
        {key: 'check_num', label: `流失时间`, visible: true, minWidth: 150},
        {key: 'waiting_coin', label: `员工最后发言`, visible: true, minWidth: 150},
        {key: 'operate', label: `操作`, visible: true, minWidth: 250,fixed: 'right',},
      ],
      tableDataList: [],
      total: 8, // 表格的总条数
      dateRange1: [],
      dateRange2: [],
      dateRange3: [],
      groupingList: [
        //企微号分组
        {id: 1, name: "未分组"},
        {id: 2, name: "技术组"},
        {id: 3, name: "调研组"},
      ],
      cities: [{
        value: '0',
        label: '志新'
      }, {
        value: '1',
        label: '锐行'
      }],
      value: '',
      WeChatList: [
        //所属企微号
        {id: 1, name: "技术部"},
        {id: 2, name: "人事部"},
      ],
      sexList: [
        //性别
        {id: 1, name: "男"},
        {id: 2, name: "女"},
      ],
      callList: [
        //称呼
        {id: 1, name: "有"},
        {id: 2, name: "无"},
      ],
      hasList: [
        //称呼
        {id: 1, name: "是"},
        {id: 2, name: "否"},
      ],
      weChatTypeList: [
        //微信类型
        {id: 1, name: "个人"},
        {id: 2, name: "企业"},
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName1: null,
        userName2: null,
        userName3: null,
        userName4: null,
        userName5: null,
        userName6: null,
        userName7: null,
        userName8: null,
        userName9: null,
        userName10: null,
        userName11: null,
        userName12: null,
        userName13: null,
        userName14: null,
      },

    };
  },
  created() {
    this.getList();
    this.tableDataList=[];
    for (let i=0; i<10;i++){
      let obj={
        name:'小红',
        mobile:'18207418337',
        email:'2572513931@qq.com',
        last_login_time:'锐行科技',
        create_time:'2012-02-12',
        check_payCreate_time:'一般',
        check_payStatus_name:'核心',
        account_infoStatus_name:'2012-09-13',
        all_num:'微信',
        open_num:'一般',
        check_num:'2012-09-12',
        waiting_coin:'2012-08-23',
        operate:true,
      }
      this.tableDataList.push(obj);
    }
  },
  methods: {
    showLabel() {
      console.log('点击额',);
      this.showSelectLabelPage = true;
    },
    getExample(){
      this.showExample=true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: []
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = undefined;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = [];
      if (val && val.length > 0) {
        val.forEach((item) => {
          this.multipleSelection.push(item.id);
        })
        console.log('multipleSelection', this.multipleSelection);
      }
    },
    handleView(row) {
      console.log('');
      this.$router.push({
        name:'viewCustomerDetails',
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleNumberDelete() {
      // const userIds = row.userId || this.ids;
      // this.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
      //   return delUser(userIds);
      // }).then(() => {
      //   this.getList();
      //   this.$modal.msgSuccess("删除成功");
      // }).catch(() => {
      // });
      this.$msgBox.showMsgBox({
        title: "是否确认删除？",
        content: "该企微号正在执行服务，删除将会使该号从操作中释放，导致部分功能无法正常使用，请谨慎选择。*如该号已加入在线聊天，成功删除后，聊天记录会被一并删除，重新登录后无法恢复。",
      })
        .then(async (val) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    /** 导出按钮操作 */
    handleExport() {
      this.showExportPage = true;
    },
    handleCustom() {
      this.showCustomListPage = true;
    },
    handerTableLabel() {
      console.log('点击了打开标签');
      this.showTableLabel = true;
    },
    handleSelectSmartTags() {
      //打开智能标签
      this.showSelectSmartTags = true;
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  //background: #fff;
}

.header-top {
  height: 46px;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  position: relative;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  .head-title {
    margin-right: 10px;
  }
  .head-right{
    position: absolute;
    height: 100%;
    display: flex;
    justify-items: center;
    right:30px;
    align-items: center;
    .el-button--medium {
      padding: 0px 12px !important;
      height: 32px;
      display: flex;
      justify-items: center;
      align-items: center;
    }
  }
  .divider {
    margin: 0 20px;
    width: 1px;
    height: 16px;
  }
}

.content-big {
  margin: 12px;
  height: calc(100vh - 180px);
  overflow-y: auto;

  .el-form {
    padding: 10px;
    background: #fff;
    border-radius: 8px;

    .el-form-item {
      margin-bottom: 10px;

      .right-big {
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        padding-left: 11px;
        position: relative;
        z-index: 1;
        cursor: pointer;

        > span{
          width: 89px;
          display: inline-block;
          white-space: nowrap;
          position: absolute;
          z-index: 7;
          color: rgba(0, 0, 0, .45);
        }
        ::v-deep .el-input--small .el-input__inner {
          line-height: 29px;
          height: 29px;
        }
        .el-select {
          width:240px;

          ::v-deep .el-input__inner {
            border: none;
            padding-left:85px;
            background: none;
          }
        }

        .el-input {
          width:240px;

          ::v-deep .el-input__inner {
            border: none;
            padding-left:85px;
            background: none;
          }
        }

        ::v-deep .el-date-editor {
          border: none;
          padding-left: 100px;
        }
      }

    }
  }

  .content-tabel {
    background: #fff;
    margin-top: 10px;

    .content-head {
      height: 60px;
      display: flex;
      justify-content: space-between;
      padding: 16px;

      .content-left {
        display: flex;
        align-items: center;

        .left-number {
          font-size: 12px;
          color: rgba(0, 0, 0, .45);
          margin-left: 10px;
        }

        .group-btn {

        }
      }

      .content-right {
        display: flex;
        align-items: center;

        .example {
          font-size: 14px;
          display: flex;
          align-items: center;
          margin-right: 20px;

          .el-switch {
            margin-right: 10px;
            margin-left: 5px;
          }
        }
      }
    }

    .el-table {
      margin-bottom: 20px;
    }
  }

  .pagination-container {
    height: 60px;
  }
}

.table-footer {
  position: fixed;
  left: 226px;
  right: 0;
  bottom: 0;
  height: 56px;
  padding: 12px 16px;
  border-top: 1px solid #e9e9e9;
  background: #fff;
  z-index: 2;
  display: flex;
  justify-content: space-between;

  .footer-left {
    display: flex;
    align-items: center;

    .chooseAll {
      color: #5993ff;
      margin-right: 10px;
    }

    span {
      margin: 0px 10px;
      color: #5993ff;
    }
  }

  .footer-right {
    .el-dropdown {
      margin-right: 10px;

      .el-button--primary {
        border-radius: 4px;
        color: rgba(0, 0, 0, .65);
        border: 1px solid #e9e9e9;
        background: #fff;
      }
    }
  }
}
.userInfo{
  border-radius: 4px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
  padding-left: 50px;
  font-size: 14px;
  list-style: none;
  text-align: left;

  img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    left: 0px;
    top: 0px;
    position: absolute;
  }
  .label {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #f90;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.example-content {
  color: #2d8cf0;
  cursor: pointer;
}

</style>
